<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        body {
            font-family: "simsun";
        }

        .comment {
            font-size: 40px;
            color: #ff1100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    
</head>
<body>


    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

<script src="./jquery-1.11.1.js"></script>

<script>
    
    $(function(){
        // 声明两个特殊符号的变量
        const SX="★"
        const KX='☆'
        // 注册鼠标经过事件
        $('.comment li').on('mouseenter',function(){
            // 设置鼠标经过li和之前的li的纯文本内容为实心
        $(this).text(SX).prevAll('li').text(SX)
        // 设置鼠标经过li之后的li的纯文本内容为空心
        $(this).nextAll('li').text(KX)    
        })
        // 注册鼠标点击事件，委托事件
        // 给li加一个类名，有这个类名就让他是实心，没有这个类名就让他是空心
        $('.comment li').on('click',function () {
            // removeAttr() 是 jQuery 中的一个函数，用于移除 HTML 元素的属性
            $(this).addClass('fix').siblings().removeAttr('class')
            
        })
          // 注册鼠标离开事件
        $('.comment').on('mouseleave',function(){
            if ($(fix).length===0) {
                // 设置所有的li的文本内容为了空心
            $('li').text(KX)    
            }else{
                $(this).text(SX).prevAll('li').text(SX)
       
        $(this).nextAll('li').text(KX)  
            }
        })

      

    })
   
</script>
</body>
</html>
